<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
    }
    .control-group {
      margin-bottom: 10px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-size: 12px;
    }
    input[type="range"] {
      width: 100%;
    }
    button {
      width: 100%;
      padding: 8px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    button:hover {
      background-color: #45a049;
    }
    .status {
      text-align: center;
      margin: 10px 0;
      font-size: 13px;
      color: #333;
    }
  </style>
</head>
<body>
  <h3 style="margin: 0 0 10px; text-align: center;">飘雪模拟器</h3>
  <div class="status" id="status">已关闭</div>
  <button id="toggleBtn">开启飘雪</button>
  
  <div class="control-group">
    <label for="density">雪花密度: <span id="densityValue">150</span></label>
    <input type="range" id="density" min="30" max="250" value="150">
  </div>
  
  <div class="control-group">
    <label for="speed">飘落速度: <span id="speedValue">5</span></label>
    <input type="range" id="speed" min="1" max="10" value="5">
  </div>
  
  <div class="control-group">
    <label for="size">雪花大小: <span id="sizeValue">10</span></label>
    <input type="range" id="size" min="5" max="60" value="10">
  </div>

  <div class="control-group">
    <label for="color">雪花颜色1:<span id="colorValue">#e0e0e0</span></label>
    <input type="color" id="color" value="#e0e0e0">
  </div>

  <div class="control-group">
    <label for="color2">雪花颜色2:<span id="colorValue2">#ffffff</span></label>
    <input type="color" id="color2" value="#ffffff">
  </div>

  <div class="control-group">
    <label>渐变方向:</label>
    <select id="gradientType">
      <option value="linear">线向</option>
      <option value="radial">点向</option>
    </select>
  </div>

  <div class="control-group">
    <label>雪花形状:</label>
    <select id="shapeType">
      <option value="circle">圆形</option>
      <option value="square">方形</option>
      <option value="star">星形</option>
      <option value="heart">爱心</option>
      <option value="textValue">文字</option>
      <option value="random">随机混合</option>
    </select>
  </div>

  <div class="control-group" id="textInput" style="display: none;">
    <label>文字雪花:</label>
    <input type="text" id="textValue" placeholder="输入文字">
  </div>

  <script src="popup.js"></script>
</body>
</html>
